<script setup>
import { Collection } from '@element-plus/icons-vue'
import { useGameStore, useShopStore, useUserStore } from '@/stores/index'
import { useRoute } from 'vue-router'
import { baseURL } from '@/utils/request'
import { inject } from 'vue'
import { ElMessage, ElNotification } from 'element-plus'
import router from '@/router'
const getGameCart = inject('getGame')

const route = useRoute()
const gameStore = useGameStore()
const shopStore = useShopStore()
const userStore = useUserStore()
console.log(route.params.id)

const getGame = async (id) => {
  await gameStore.getGameDetail(id)
  console.log(gameStore.GameDetail)
}
const open2 = () => {
  ElNotification({
    title: '已加入购物车',
    message: `请到购物车<a href="/shoppingcart" style="color: #1976D2">查看详情</a>`,
    position: 'bottom-right',
    dangerouslyUseHTMLString: true,
    type: 'success',
    duration: 2000
  })
}
const addCart = async (game) => {
  game.is_purchased = 0
  game.gameId = gameStore.GameDetail.id
  game.userId = userStore.user.id

  await shopStore.addToCart(game)

  await getGameCart()

  open2()
}
getGame(route.params.id)
const toLogin = () => {
  ElMessage.error('请先登录')
  setTimeout(() => {
    router.push('/login')
  }, 1000)
}
</script>

<template>
  <div class="new">
    <div class="center">
      <!-- 商品卡片 -->
      <div class="new_top">
        <!-- 标题 -->
        <div class="title_top">
          <div class="img">
            <img
              :src="baseURL + '/files/' + gameStore.GameDetail.game_image"
              alt="{{ gameStore.GameDetail.game_name }}"
            />
          </div>
          <div class="infor">
            <h2 class="name">{{ gameStore.GameDetail.game_name }}</h2>
            <div class="en_name">
              {{ gameStore.GameDetail.game_description }}
            </div>
          </div>
        </div>
        <!-- 商品盒子 -->
        <div class="box-bottom">
          <!-- 盒子左边 -->
          <div class="box_L">
            <!-- 图片 -->
            <div class="swiperbox">
              <!-- 左侧图片 -->
              <div class="swiper_img">
                <div>
                  <div class="swiper-wrapper" aria-live="polite">
                    <div
                      class="swiper-slide"
                      style="width: 616px; margin-right: 10px"
                      role="group"
                      aria-label="1 / 3"
                    >
                      <a href="javascript:void(0)" class="img"
                        ><img
                          :src="baseURL + '/files/' + gameStore.GameDetail.game_image"
                          alt="{{ gameStore.GameDetail.game_name }}"
                      /></a>
                    </div>
                  </div>
                  <div
                    class="swiper-button-next swiper-button-disabled"
                    tabindex="-1"
                    role="button"
                    aria-label="Next slide"
                    aria-controls="swiper-wrapper-a61d3a47237cabb7"
                    aria-disabled="true"
                  ></div>

                  <span class="swiper-notification" aria-live="assertive" aria-atomic="true"></span>
                </div>
              </div>
              <!-- 右侧导航图 -->
              <div class="swiper_small">
                <div
                  class="swiper swiper-initialized swiper-vertical swiper-pointer-events swiper-free-mode swiper-watch-progress swiper-backface-hidden swiper-thumbs"
                >
                  <div
                    class="swiper-wrapper"
                    style="transform: translate3d(0px, 0px, 0px); transition-duration: 0ms"
                    id="swiper-wrapper-ceadcf57d2ad8586"
                    aria-live="polite"
                  >
                    <div
                      class="swiper-slide swiper-slide-visible swiper-slide-active"
                      style="height: 56px; margin-bottom: 5px"
                      role="group"
                      aria-label="1 / 3"
                    >
                      <a class="img"
                        ><img
                          :src="baseURL + '/files/' + gameStore.GameDetail.game_image"
                          alt="{{ gameStore.GameDetail.game_name }}"
                      /></a>
                    </div>
                  </div>
                  <div
                    class="swiper-scrollbar swiper-scrollbar-vertical swiper-scrollbar-lock"
                    style="display: none"
                  >
                    <div
                      class="swiper-scrollbar-drag"
                      style="
                        height: 354px;
                        transform: translate3d(0px, 0px, 0px);
                        transition-duration: 0ms;
                      "
                    ></div>
                  </div>
                  <span class="swiper-notification" aria-live="assertive" aria-atomic="true"></span>
                </div>
              </div>
            </div>
            <!-- 点赞 -->
            <div class="zanbox">
              <span
                ><a href="javascript:void(0)" class="img"><img class="lazy" src="" alt="" /></a
              ></span>
              <div class="zan_">
                <div class="zan_num">5</div>
              </div>
            </div>
          </div>
          <!-- 盒子右边 -->
          <div class="box_R">
            <!-- 顶部框 -->
            <div class="swiper_top">
              <div class="bt">请确认购买的平台，和所对应的平台激活</div>
            </div>
            <!-- 平台选择 -->
            <div class="switch_">
              <!-- 平台 -->
              <div class="lis_a">
                <div class="tab">Steam</div>
              </div>
              <!-- 版本 -->
              <div class="lis_b">
                <div class="lis">
                  <div class="ul">
                    <!-- 点击切换样式 -->
                    <div class="li on">DLC1</div>
                    <div class="li">本体+DLC2</div>
                    <div class="li">本体+豪华版DLC</div>
                    <div class="li">典藏包</div>
                  </div>
                </div>
              </div>
            </div>
            <!-- 价格栏 -->
            <div class="numberbox">
              <div class="nuber">
                <div class="p">
                  <span class="price"
                    >¥{{ gameStore.GameDetail.price }}.<u class="u_samll_number">00</u></span
                  >
                </div>
              </div>
              <p>
                <span
                  >¥<i class="source">{{
                    parseFloat(gameStore.GameDetail.price).toFixed(2)
                  }}</i></span
                >
                <span
                  >HK$<i class="price_hk">{{
                    (gameStore.GameDetail.price * 1.0858).toFixed(2)
                  }}</i></span
                >
              </p>
              <div class="lab">-0%</div>
            </div>
            <!-- 购买按钮 -->
            <div class="btnbox">
              <div class="tab">
                <!-- 图标 -->
                <div class="iconfont"></div>
                <p>
                  <a
                    v-if="userStore.user.id"
                    href="javascript:void(0);"
                    @click="addCart(gameStore.GameDetail), $router.push('/shoppingcart')"
                    >立即购买</a
                  >
                  <a v-else href="javascript:void(0);" @click="toLogin()">立即购买</a>
                </p>
              </div>
              <a
                v-if="userStore.user.id"
                class="tab open_car"
                href="javascript:void(0);"
                @click="addCart(gameStore.GameDetail)"
                >加入购物车</a
              >
              <a v-else class="tab open_car" href="javascript:void(0);" @click="toLogin()"
                >加入购物车</a
              >
            </div>
          </div>
        </div>
      </div>
      <!-- 商品介绍和评论 -->
      <div class="new_clear">
        <!-- 左边介绍 -->
        <div class="new_shop_ContL fl">
          <!-- 版本介绍 -->
          <div class="new_gameinforlab">
            <div class="tilebt">
              <el-icon><Collection /></el-icon>版本介绍
            </div>
            <div class="newsinfor_">
              <p style="font-size: 14px; text-align: center">
                <img
                  :src="baseURL + '/files/' + gameStore.GameDetail.game_image"
                  alt="{{ gameStore.GameDetail.game_name }}"
                />
              </p>
              <p style="font-size: 14px; text-align: center">
                DLC1=黄金树幽影DLC+预购奖励 国区激活码
              </p>
              <p style="font-size: 14px; text-align: center">
                本体+DLC2&nbsp;=本体+黄金树幽影版DLC+预购奖励 国区激活码
              </p>
              <p style="font-size: 14px; text-align: center">
                &nbsp;本体+豪华版DLC =本体+黄金树幽影&nbsp;数字豪华版DLC+预购奖励&nbsp;国区激活码
              </p>
              <p style="font-size: 14px; text-align: center">
                典藏包 = 黄金树幽影版&nbsp;数字典藏包+预购奖励国区激活码
              </p>
              <div style="font-size: 14px; text-align: center">
                ⒈Steam左下角点击：添加游戏&gt;&gt;在Steam上激活产品
              </div>
              <div style="font-size: 14px; text-align: center">
                ⒉在弹出的对话框中，点击下一步&gt;&gt;同意&gt;&gt;输入CDKey激活
              </div>
              <div style="font-size: 14px; text-align: center">
                ⒊激活成功后，在游戏库内&gt;&gt;选择游戏&gt;&gt;点击安装，下载游戏
              </div>
              <div style="font-size: 14px; text-align: center">
                -----------------------------------------------------------------------------------------
              </div>
              <div style="font-size: 14px; text-align: center">
                steam查看国家/地区（中国）：https://store.steampowered.com/account/
              </div>
              <div style="font-size: 14px; text-align: center">
                steam下载地址：https://steamcdn-a.akamaihd.net/client/installer/SteamSetup.exe&nbsp;
              </div>
              <div style="font-size: 14px; text-align: center">
                （请将steam客户端安装在全英文文件夹当中）
              </div>
            </div>
          </div>

          <!-- 游戏介绍 -->
          <div class="new_gameinforlab">
            <div class="tilebt">
              <el-icon><Document /></el-icon>游戏介绍
            </div>
            <div class="newsinfor_">
              <p>
                ・充满刺激的辽阔世界<br />
                无缝连接的辽阔世界──尽情探索状况多变的开放场景，构造复杂、立体的巨大地下迷宫。<br />
                在探索新发现时感到欣喜，在征服强敌时感到成就感十足，丰富内容等你体会。<br />
                <br />
                ・专属于你的角色<br />
                不只能自订操纵角色的外表，更能自行搭配武器、装备，与魔法──<br />
                想成为力量取胜的顽强战士，或选择在魔法领域登峰造极，都能照自己的游玩风格决定。<br />
                <br />
                ・源自神话的群像剧<br />
                片段破碎，却又多彩的故事──以“交界地”为舞台登场的角色们各有主张，<br />
                于是在利害关系之下谱成的群像剧，就此展开。<br />
                <br />
                ・与其他玩家维持非即时连系的独特系统<br />
                除了能与其他玩家一同游玩的多人联机游玩以外，<br />
                本游戏也有非即时联机系统，能借此得知其他玩家的存在。
              </p>
            </div>
          </div>
          <!-- 评论 -->
          <div class="commentswrap">
            <div class="Comments_wrap">
              <!-- 头部 -->
              <div class="Cs_head">
                <div class="Cs_titile">
                  <div class="bt">评论</div>
                  <span>0</span>条
                </div>
              </div>
              <!-- 发布区 -->
              <div class="Cs_postwrap">
                <!-- 评论输入框 -->
                <div class="input">
                  <textarea placeholder="发一条友善的评论" class="text"></textarea>
                  <!-- 没有登陆出发弹窗 -->
                  <div class="nologin">
                    请先
                    <a href="javascript:void(0);" onclick="openlogin()">登录</a>后发表评论 (・ω・)
                  </div>
                </div>
                <!-- 右侧发布按钮 -->
                <div class="btn" onclick="comment(this)">
                  <span>发表评论</span>
                </div>
              </div>
              <!-- 评论列表 -->
              <!-- <div class="Cslis_wrap"></div>
              <input type="hidden" id="page" value="1" />
              <a class="Cslis_more" onclick="pagedown()" style="display: none"
                >查看更多 (・ω・)</a
              > -->
            </div>
          </div>
        </div>
        <!-- 右边定位介绍 -->
        <div class="new_shop_ContR fr">
          <div class="new_MinR2">
            <div class="bt_tile">游戏信息</div>
            <div class="lis_p">
              <div class="p">
                <span>开发商：</span>
                <p>FromSoftware Inc.</p>
              </div>
              <div class="p">
                <span>发行商：</span>
                <p>FromSoftware Inc., Bandai Namco Entertainment</p>
              </div>
              <div class="p">
                <span>发行日期：</span>
                <p>{{ gameStore.GameDetail.release_date }}</p>
              </div>
              <div class="p">
                <span>游戏语言：</span>
                <p>中文+多语言</p>
              </div>
              <div class="p">
                <span>支持系统：</span>
                <p>Win</p>
              </div>
              <div class="p">
                <span>游戏类型：</span>
                <p class="li_a">
                  <a href="#"
                    ><u>{{ gameStore.GameDetail.category }}</u></a
                  >
                </p>
              </div>
            </div>
            <div class="bt_tile">最低配置</div>
            <div class="lis_p2">
              <p>操作系统: Windows 7 SP1</p>
              <p>CPU: Intel Core i5-2500K / AMD FX-6300</p>
              <p>内存: 8GB</p>
              <p>显卡: Windows 7 SP1</p>
              <p>存储空间: 150GB</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.new {
  .center {
    padding-top: 40px;
    width: 1240px;
    margin: 0 auto;

    //商品卡片
    .new_top {
      width: 100%;
      height: 600px;
      position: relative;

      .title_top {
        background-color: #fff;

        width: 50%;
        padding: 5px 20px;
        border-radius: 10px 10px 0 0;
        position: absolute;
        display: flex;

        .img {
          width: 30%;

          img {
            margin-top: 8px;
            border-radius: 10px;
            width: 100%;
            height: 100px;
            object-fit: cover;
          }
        }

        .infor {
          padding-left: 20px;

          .name {
            color: #000;
          }

          .en_name {
            color: #000;
          }
        }
      }

      //商品卡片
      .box-bottom {
        width: 100%;
        height: 450px;
        background-color: #fff;

        transform: translateY(95px);
        border-radius: 0 10px 10px 10px;

        display: flex;

        .box_L {
          width: 60%;
          margin: 20px;

          .swiperbox {
            display: flex;

            .swiper_img {
              .swiper-wrapper {
                .swiper-slide {
                  overflow: hidden;

                  .img {
                    img {
                      border-radius: 10px;
                      width: 100%;
                      height: 350px;
                      object-fit: cover;
                    }
                  }
                }
              }
            }

            .swiper_small {
              width: 15%;

              .img {
                img {
                  border-radius: 10px;
                  width: 100%;
                  height: 60px;
                  object-fit: cover;
                }
              }
            }
          }

          .zanbox {
            height: 30px;
            display: flex;

            align-items: center;
            margin-top: 20px;

            .zan_ {
              margin-left: 10px;
              width: 40px;
              height: 30px;
              background-color: #ff7f50;
              border-radius: 30px;
              text-align: center;

              .zan_num {
                line-height: 30px;
                color: #fff;
              }
            }

            .img {
              img {
                width: 30px;
                border-radius: 50%;
              }
            }
          }
        }

        .box_R {
          flex: 1;

          .swiper_top {
            width: 100%;
            height: 30px;
            background: linear-gradient(90deg, #f83314 0%, #ffbd4a 100%);
            border-radius: 20px 20px 0 0;
            margin-bottom: 60px;

            .bt {
              color: #fff;
              font-size: 16px;
              line-height: 30px;
              text-align: center;
            }
          }

          .switch_ {
            background-color: rgb(245, 248, 250);
            border-radius: 15px;
            margin: 20px 20px 20px 0;
            position: relative;

            .lis_a {
              transform: translateY(-40px);
              position: absolute;
              width: 25%;

              height: 60px;
              background-color: rgb(245, 248, 250);
              border-radius: 10px;

              .tab {
                color: #000000;
                font-size: 16px;
                margin-top: 6px;
                text-align: center;
              }
            }

            .lis_b {
              position: relative;

              .lis {
                height: 70px;
                padding-top: 8px;

                .ul {
                  width: 100%;
                  height: 35px;

                  margin-top: 10px;
                  padding-left: 20px;
                  display: flex;

                  .li {
                    padding: 0 10px;
                    height: 35px;

                    margin-right: 10px;
                    line-height: 35px;
                    border-radius: 10px;
                    cursor: pointer;
                  }

                  .li:hover {
                    background-color: #fff;
                  }

                  .li.on {
                    background-color: #f83314;
                    color: #ffffff;
                  }
                }
              }
            }
          }

          .numberbox {
            margin-top: 100px;
            display: flex;
            align-items: center;

            .nuber {
              color: #f83314;
              font-size: 42px;
              font-weight: bold;

              u {
                text-decoration: none;
                font-size: 24px;
              }
            }

            p {
              margin-left: 10px;
              display: flex;
              flex-direction: column;

              i {
                font-style: normal;
              }
            }

            .lab {
              height: 50px;
              width: 80px;
              border-radius: 10px;
              background: linear-gradient(90deg, #00831e 0%, #94ff09 100%);
              color: #fff;
              font-size: 20px;
              line-height: 50px;
              text-align: center;
              font-weight: bold;
              margin-left: 20px;
            }
          }

          .btnbox {
            display: flex;
            width: 100%;
            background-color: rgb(253, 242, 229);
            border-radius: 40px;

            .tab {
              width: 50%;
              display: flex;
              align-items: center;
              justify-content: center;

              p {
                a {
                  color: #f83314;
                  font-size: large;
                  font-weight: bold;
                }
              }
            }

            .tab.open_car {
              width: 50%;
              background: linear-gradient(90deg, #f83314 0%, #ffbd4a 100%);
              color: #fff;
              font-size: large;
              font-weight: bold;
              border-radius: 0 40px 40px 0;
            }
          }
        }
      }
    }

    //游戏介绍，评论
    .new_clear {
      display: flex;
      width: 100%;
      margin-top: -50px;

      //左侧定位介绍
      .new_shop_ContL.fl {
        width: 70%;

        //版本介绍
        .new_gameinforlab {
          background-color: #fff;
          border-radius: 20px;
          padding: 20px;
          margin-top: 20px;

          .tilebt {
            height: 60px;
            line-height: 60px;
            font-size: 24px;
            font-weight: bold;

            .el-icon {
              margin-right: 5px;
              font-size: 30px;
            }
          }

          .newsinfor_ {
            img {
              border-radius: 20px;
              transition: all 0.3s ease;
              width: 700px;
              height: 350px;

              object-fit: cover;
              &:hover {
                transform: scale(0.99) translateY(-5px);
              }
            }
          }
        }

        //游戏介绍
        //评论
        .commentswrap {
          background-color: #fff;
          margin: 20px auto;
          padding: 20px;
          border-radius: 20px;

          .Cs_head {
            margin-bottom: 20px;

            .Cs_titile {
              display: flex;
              align-items: center;

              .bt {
                font-size: 24px;
                font-weight: bold;
                margin-right: 10px;
              }
            }
          }

          .Cs_postwrap {
            display: flex;

            height: 80px;

            .input {
              width: 90%;
              margin-right: 10px;

              textarea {
                width: 100%;
                height: 80px;
                text-decoration: none;
                background-color: rgb(245, 248, 250);
                border: none;
                resize: none;
                padding: 20px;
                font-size: 16px;
                border-radius: 20px;
                outline: none;
              }

              .nologin {
                display: none;
              }
            }

            .btn {
              width: 10%;
              background-color: rgb(245, 248, 250);
              padding: 15px 21px;
              border-radius: 20px;
              font-size: large;
              cursor: pointer;

              &:hover {
                background: linear-gradient(90deg, #f83314 0%, #ffbd4a 100%);
                color: #fff;
              }
            }
          }
        }
      }

      //右侧定位介绍
      .new_shop_ContR.fr {
        position: sticky;
        top: 60px;
        margin-top: 20px;
        margin-left: 20px;
        margin-bottom: 20px;
        padding: 20px;
        width: 30%;
        background-color: #fff;
        border-radius: 20px;
        height: -webkit-fill-available;

        .new_MinR2 {
          .bt_tile {
            font-size: 24px;
            font-weight: bold;
          }

          .li_a {
            margin-bottom: 20px;

            a {
              background-color: rgb(245, 248, 250);
              padding: 10px 20px;

              border-radius: 10px;

              u {
                text-decoration: none;
                outline: none;
              }

              &:hover {
                background-color: #3babe3;
                color: #fff;
              }
            }
          }
        }
      }
    }
  }
}
</style>
